<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./ajax.js"></script>
</head>
<body>
    <input type="file" class="img">
    <button class="btn1">点击发送get的ajax</button><br>
    <script>
        let btn1 = document.querySelector(".btn1");
        let btn2 = document.querySelector(".btn2");
        btn1.onclick = async function (){
            let res1 = await ajax({
                url:"get.php",      //ajax配置API路径
                method:"get",       //get和post传输   默认get
                async:true,        //ajax同步异步，不写和true为同步，默认同步，false为异步       
                dataType:"json", //当传进来的数据格式为text时，返回也为text，当传入的数据时json格式时，返回json格式数据
                data:{            //传入数据集
                    name:"张三",
                    age:"20"
                }
            });
            console.log(res1);
            let res2 = await ajax({
                url:"post.php",
                method:"POST",
                async:true,
                dataType:"text", //当传进来的数据格式为text时，返回也为text，当传入的数据时json格式时，返回json格式数据
                data:{
                    name:"李四",
                    age:"15"
                }
            });
            console.log(res2);
            let imgEle = document.querySelector(".img").files[0];
            let form = new FormData();
            form.append('img',imgEle);
            let res3 = await ajax({
                url:"file1.php",
                method:"POST",
                async:true,
                contentType:false,
                dataType:"text", //当传进来的数据格式为text时，返回也为text，当传入的数据时json格式时，返回json格式数据
                data:form
            });
            console.log(res3);
        }
        
        // function ajax(options){
        //     let {url="",method="get",async=true,dataType="text",data={},success=function(){}} = options ;
        //     // 申明一个变量解析ajax的配置项
        //     // url为ajax请求地址默认为空
        //     // method为ajax请求方式，get和post方式，默认为get
        //     // async为ajax请求的同步与异步，true为异步操作，false为同步操作，默认为true
        //     // dataType为请求ajax时发送的数据类型，接收和发送ajax数据类型保持一致
        //     // data为请求ajax的发送的数据集
        //     // success方法为请求ajax成功时，执行的方法，可以将请求成功的数据当作实参传回我们需要用到ajax请求的地方执行
        //     let xhr ;                      // 申明一个变量
        //     if(window.XMLHttpRequest){          //当存在  XMLHttpRequest  方法时  创建ajax请求
        //         xhr = new XMLHttpRequest();
        //     } else {                            //不兼容   XMLHttpRequest   方法时      
        //         xhr = new ActiveXObject();      //创建ie模式下的ajax请求
        //     }
        //     if ( method.toLowerCase() == "get" ){       //如果配置项中的传输方式为get
        //         url = url + "?" + getSearch(data);      //那么就给文件路径  url  拼接search
        //     }
            
        //     xhr.open(method,url,async);                 //打开ajax

        //     if( method.toLowerCase() == "post" ){       //如果传输方式为post
        //         xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");  //设置post传输的头部
        //     }           
                                           
        //     if( method.toLowerCase() == "post" ){       //如果传输方式为post传输
        //         xhr.send(getSearch(data));              //发送ajax时并传递数据
        //     } else {
        //         xhr.send();                             //如果不是post传输方式，只需要send即可
        //     }

        //     xhr.onload = function (){               
        //         // dataType数据集的类型，保证发送数据集合返还数据集保持一致性
        //         if( dataType.toLowerCase() == "json" ){     //当传进来的数据集的类型是json格式时
        //             success(JSON.parse(xhr.responseText));  //传递出去的数据集也是json格式
        //         } else {
        //             success(xhr.responseText);              //否者默认格式
        //         }
        //     }
        // }
        // // 将数据集进行拼接操作
        // function getSearch(obj){
        //     str = '' ;
        //     for( let key in obj ){
        //         str = str+key+"="+obj[key]+"&";
        //     }
        //     str = str.substr(0,str.length-1);
        //     return str ; 
        // }
    </script>
</body>
</html>